<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/sucess.css">
    <script src="https://at.alicdn.com/t/font_2891532_1tfbb9l2y1y.js"></script>
</head>

<body>
    <div class="wrap">
        <div class="box">
            <button id="back">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fanhui2"></use>
                </svg>
            </button>
            <div id="user"></div>
            <p id="welcome"></p>
            <div class="QR_code">
                <img id="QR" src="" alt="">
            </div>
            <button class="save">保存图片</button>
            <p>请保存此页面，进入参观区域前向工作人员出示，谢谢！</p>
        </div>
    </div>

    <script src="封装Promise Ajax.js"></script>

    <script>
        let e;
        let token = localStorage.getItem("token"); //获取token参数

        let QR = document.querySelector("#QR");
        let save = document.querySelector(".save");
        let user = document.querySelector("#user");
        let welcome = document.querySelector("#welcome");

        (async() => {
            let e = await ajax("http://newshopapi.0melon0.cn/api/f_user/Qrcode", { //获取二维码接口
                "token": token,
                "id": localStorage.getItem("id")
            });

            // 一、渲染用户名和二维码
            user.innerHTML = localStorage.getItem("name") + " ：";
            QR.src = e.data.data;

            // 二维码地址存入localStorage
            localStorage.setItem("QR_Img", e.data.data);

            let str1 = localStorage.getItem("day_time"); //将日期存变量
            let arr = str1.split("-");
            let str3 = `${arr[1]}月${arr[2]}日`;

            welcome.innerHTML = `欢迎您在${str3}${localStorage.getItem("time").split("-")[0]}参观${arr[0]}广州国际花卉艺术展暨中国插花花艺展。`;



            // 二、点击保存二维码
            save.addEventListener("click", () => {
                let img = document.getElementById("QR"); // 获取要下载的图片
                let url = img.src; // 获取图片地址
                let a = document.createElement('a'); // 创建一个a节点插入的document
                let event  =  new  MouseEvent('click') // 模拟鼠标click点击事件
                a.download = '二维码' // 设置a节点的download属性值
                a.href = url; // 将图片的src赋值给a节点的href
                a.dispatchEvent(event) // 触发鼠标点击事件
            })
        })();

        // 三、返回上一页
        back.addEventListener("click", () => {
            location.assign("./reserve.html");
        });
    </script>
</body>

</html>